<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 表单选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .highlight { background-color: yellow; }
    </style>
</head>
<body>
    <form>
        <label for="text-input">文本输入:</label>
        <input type="text" id="text-input" name="text-input"><br><br>

        <label for="password-input">密码输入:</label>
        <input type="password" id="password-input" name="password-input"><br><br>

        <label for="radio-input">单选按钮:</label>
        <input type="radio" id="radio-input" name="radio-group" value="option1"> 选项1
        <input type="radio" id="radio-input2" name="radio-group" value="option2"> 选项2<br><br>

        <label for="checkbox-input">复选框:</label>
        <input type="checkbox" id="checkbox-input" name="checkbox-group" value="option1"> 选项1
        <input type="checkbox" id="checkbox-input2" name="checkbox-group" value="option2"> 选项2<br><br>

        <label for="submit-input">提交按钮:</label>
        <input type="submit" id="submit-input" value="提交"><br><br>

        <label for="reset-input">重置按钮:</label>
        <input type="reset" id="reset-input" value="重置"><br><br>

        <label for="button-input">普通按钮:</label>
        <input type="button" id="button-input" value="点击我"><br><br>

        <label for="file-input">文件上传:</label>
        <input type="file" id="file-input" name="file-input"><br><br>

        <label for="image-input">图像提交按钮:</label>
        <input type="image" id="image-input" src="submit.png" alt="Submit"><br><br>

        <label for="hidden-input">隐藏输入:</label>
        <input type="hidden" id="hidden-input" name="hidden-input" value="hidden-value"><br><br>

        <label for="range-input">范围选择:</label>
        <input type="range" id="range-input" name="range-input" min="0" max="100"><br><br>

        <label for="email-input">电子邮件:</label>
        <input type="email" id="email-input" name="email-input"><br><br>

        <label for="url-input">网址:</label>
        <input type="url" id="url-input" name="url-input"><br><br>

        <label for="number-input">数字:</label>
        <input type="number" id="number-input" name="number-input"><br><br>

        <label for="tel-input">电话:</label>
        <input type="tel" id="tel-input" name="tel-input"><br><br>

        <label for="color-input">颜色选择:</label>
        <input type="color" id="color-input" name="color-input"><br><br>
    </form>

    <script>
        // 表单选择器
        /*
         1.input选择器   :input $(":input") 选择所有input标签  会匹配所有的input textarea select button
         2.text选择器   :text $(":text") 选择所有text标签
         3.password选择器   :password $(":password") 选择所有password标签
         4.radio选择器   :radio $(":radio") 选择所有radio标签
         5.checkbox选择器   :checkbox $(":checkbox") 选择所有checkbox标签
         6.submit选择器   :submit $(":submit") 选择所有submit标签
         7.reset选择器  :reset $(":reset") 选择所有reset标签
         8.button选择器   :button $(":button") 选择所有button标签

         9.file选择器  :file $(":file") 选择所有file标签
         10.image选择器  :image $(":image") 选择所有image标签
         11.hidden选择器  :hidden $(":hidden") 选择所有hidden标签
         12.range选择器  :range $(":range") 选择所有range标签
         13.email选择器  :email $(":email") 选择所有email标签
         14.url选择器  :url $(":url") 选择所有url标签
         15.number选择器  :number $(":number") 选择所有number标签
         16.tel选择器  :tel $(":tel") 选择所有tel标签
         17.color选择器  :color $(":color") 选择所有
        */

        // 1. input选择器
        // 选择所有 input 标签（包括 textarea, select, button）
        var allInputs = $(":input");
        allInputs.css("border", "2px solid blue");
        console.log("所有 input 标签: ", allInputs);

        // 2. text选择器
        // 选择所有 type="text" 的 input 标签
        var textInputs = $(":text");
        textInputs.css("background-color", "lightgreen");
        console.log("所有 text 输入框: ", textInputs);

        // 3. password选择器
        // 选择所有 type="password" 的 input 标签
        var passwordInputs = $(":password");
        passwordInputs.css("background-color", "lightcoral");
        console.log("所有 password 输入框: ", passwordInputs);

        // 4. radio选择器
        // 选择所有 type="radio" 的 input 标签
        var radioInputs = $(":radio");
        radioInputs.css("accent-color", "orange");
        console.log("所有 radio 按钮: ", radioInputs);

        // 5. checkbox选择器
        // 选择所有 type="checkbox" 的 input 标签
        var checkboxInputs = $(":checkbox");
        checkboxInputs.css("accent-color", "purple");
        console.log("所有 checkbox 按钮: ", checkboxInputs);

        // 6. submit选择器
        // 选择所有 type="submit" 的 input 标签
        var submitInputs = $(":submit");
        submitInputs.css("background-color", "lightblue");
        console.log("所有 submit 按钮: ", submitInputs);

        // 7. reset选择器
        // 选择所有 type="reset" 的 input 标签
        var resetInputs = $(":reset");
        resetInputs.css("background-color", "lightpink");
        console.log("所有 reset 按钮: ", resetInputs);

        // 8. button选择器
        // 选择所有 type="button" 的 input 标签
        var buttonInputs = $(":button");
        buttonInputs.css("background-color", "lightgray");
        console.log("所有 button 按钮: ", buttonInputs);

        // 9. file选择器
        // 选择所有 type="file" 的 input 标签
        var fileInputs = $(":file");
        fileInputs.css("background-color", "lightyellow");
        console.log("所有 file 输入框: ", fileInputs);

        // 10. image选择器
        // 选择所有 type="image" 的 input 标签
        var imageInputs = $(":image");
        imageInputs.css("border", "2px dashed red");
        console.log("所有 image 提交按钮: ", imageInputs);

        // 11. hidden选择器
        // 选择所有 type="hidden" 的 input 标签
        var hiddenInputs = $(":hidden");
        hiddenInputs.val("新的隐藏值");
        console.log("所有 hidden 输入框: ", hiddenInputs);

        // 12. range选择器
        // 选择所有 type="range" 的 input 标签
        var rangeInputs = $(":range");
        rangeInputs.css("accent-color", "teal");
        console.log("所有 range 输入框: ", rangeInputs);

        // 13. email选择器
        // 选择所有 type="email" 的 input 标签
        var emailInputs = $(":email");
        emailInputs.css("background-color", "lightcyan");
        console.log("所有 email 输入框: ", emailInputs);

        // 14. url选择器
        // 选择所有 type="url" 的 input 标签
        var urlInputs = $(":url");
        urlInputs.css("background-color", "lightgoldenrodyellow");
        console.log("所有 url 输入框: ", urlInputs);

        // 15. number选择器
        // 选择所有 type="number" 的 input 标签
        var numberInputs = $(":number");
        numberInputs.css("background-color", "lightseagreen");
        console.log("所有 number 输入框: ", numberInputs);

        // 16. tel选择器
        // 选择所有 type="tel" 的 input 标签
        var telInputs = $(":tel");
        telInputs.css("background-color", "lightsteelblue");
        console.log("所有 tel 输入框: ", telInputs);

        // 17. color选择器
        // 选择所有 type="color" 的 input 标签
        var colorInputs = $(":color");
        colorInputs.css("accent-color", "gold");
        console.log("所有 color 输入框: ", colorInputs);
    </script>
</body>
</html>